import React from 'react';
import classNames from 'classnames'

const Toast = ({type, title="", content="", id}) => {
  let titleEle= null;
  
  //todos 整理icon
  const icons = {
    success: 'circle-check',
    error: 'remove',
    info: 'info',
    warning: 'gantanhao'
  };

  if (title) {
    titleEle = <h6 className="toast-confirm-title">{title}</h6>
  }

  return (
    <div 
      className="toast-wrap hidden" 
      id={id}
    >
      <div className={classNames("mod-toast", `toast-${type}`)}>
        <div className="toast-content">
          <div className="toast-confirm-body">
            <i className={classNames("iconfont", `icon-${icons[type]}`)}></i>
            <div className="toast-confirm-msg">
              {titleEle}
              <div className="toast-confirm-content">{content}</div>
            </div>
          </div> 
        </div> 
      </div>
    </div>
  )
}
export default Toast